<template>
  <div id="container" class="map">
    <dv-loading style="position: absolute;z-index: 9999;color:white;" v-show="showLoading">Loading...</dv-loading>
    <picture-viewer ref="imageViewer2"></picture-viewer>
  </div>

</template>
<script type="text/javascript"
        src="//webapi.amap.com/maps?v=1.4.15&key=d3f3af59f095cdd7af11474fc749f11b&plugin&plugin=Map3D,AMap.DistrictSearch"></script>

<script>
  import icon2 from '../imgs/qx.png'
  import PictureViewer from "@/components/picture-viewer/index-name";
  import AMap from 'AMap'
  import {locations, getMapData, getcheckMapData} from '@/services/model/pipeline'
  import constUrl from '@/services/env'
  import Vue from "vue";

  // 渲染模板
  const HTML_CONT =
    (img) => {
    let url = require('../imgs'+img.url)
      if(img.type ===1 ){
        return `<div class="board_map-market">
          <img class="img1" src="${url}" />
        </div>`
      }else{
        return `<div class="board_map-market">
          <img class="img2" src="${url}" />
        </div>`
      }
    }

  //  缺陷mark渲染模板
  const HTML_CHECK =
    (level) => {
      let url = require('../checkImgs/'+level+'.png')
   return `<div class="board_map-market">
          <img class="img2" src="${url}" />
        </div>`

    }
  // 等级颜色
  const LEVEL_COLOR_MAP = {
    1: '#0DC26B',
    2: '#0073b7',
    3: '#f39c12',
    4: '#ff851b',
    5: '#e43321'
  }

  export default {
    components: {PictureViewer},
    data() {
      return {
        marker: null,
        type2List:[],
        line: [],
        flag:false,
        showLoading: true,
        cluster: null, // 点聚合实例model
        constUrl,
        map: null,
        object3Dlayer: null,
        // 点标记集合
        markerList: [],
        projectMapDataList: [],
        damageMapDataList: [],
        // 是否展示弹窗
        isShowDialog: false,
        // 点聚合实例
        markerClusterer: null,
        //缺陷聚合实例
        markerClusterer1: null,
        colors: {},
        locationsList: []
      }
    },
    computed: {
      tabValue() {
        return this.$route.name
      }
    },
    watch: {
      tabValue: 'getMarks'
    },
    methods: {
      //控制刷新
      refresh(pipeType, deptTreeId, baseUnitId) {
        this.initMap(pipeType, deptTreeId, baseUnitId)
      },
      // 初始化地图
      initMap(pipeType, deptTreeId, baseUnitId) {
        let that = this
        this.map = new AMap.Map('container', {
          resizeEnable: true,
          viewMode: '3D',
          labelzIndex: 330,
          expandZoomRange: true,
          zoom: 12,
          zooms: [3, 22],
          center: [106.71539, 26.574457],
          // center: [106.671492, 26.592221],

          mapStyle: 'amap://styles/dark',//地图颜色
          layers: [
            // 路网
            // new AMap.TileLayer.RoadNet()
          ]
        })

        this.map.on('zoomchange', function (e) {
          //获取当前最新的地图层级
          let Zoom = that.map.getZoom()
          let mapDataList = that.mapDataList
          if (Zoom < 19&&that.flag) {
            that.flag = false
            that.map.remove( that.type2List)
          }else if(Zoom>=19&&!that.flag){
            that.flag = true
            that.getMarks()
          }
        })
        this.queryMapList(pipeType, deptTreeId, baseUnitId)
        this.queryCheckMapList(pipeType, deptTreeId, baseUnitId)
        this.locations(pipeType, deptTreeId, baseUnitId)

      },

      //查询线路经纬度
      async locations(pipeType, deptTreeId, baseUnitId) {
        this.showLoading = true
        const res = await locations({pipeType, deptTreeId, baseUnitId})
        this.locationsList = res.data || []
        this.ThinLine()
        this.showLoading = false
      },
      // 划线
      ThinLine() {
        var object3Dlayer = new AMap.Object3DLayer({zIndex: 1});
        this.map.add(object3Dlayer);
        // rgba
        var color = 'red';
        for (let i = 0; i < this.locationsList.length; i++) {
          let loc = this.locationsList[i]
          let temp = [];
          switch (loc.pipeType) {
            case 1:
              color = '#0000FF'
              break
            case 2:
              color = 'green'
              break
            case 3:
              color = '#FFBF00'
              break
            case 4:
              color = '#00FFFF'
              break
            case 5:
              color = 'yellow'
              break
            case 6:
              color = '#FF00FF'
              break
            case 7:
              color = 'red'
              break
            case 8:
              color = 'green'
              break

          }
          for (let j = 0; j < loc.locations.length; j++) {
            let lonlat = loc.locations[j]
            temp.push(new AMap.LngLat(lonlat[0], lonlat[1]))
          }
          var line = new AMap.Polyline({
            path: temp,
            strokeColor: color,
            // height: height,
            strokeWeight: 2,
          });
          line.setMap(this.map);
          this.line.push(line)
          let _this = this
          let content =
            `<el-card class="box-card" style="width: 500px">
           <a @click="btnClose" class="btn-close amap-ui-infowindow-close amap-ui-smp-ifwn-def-tr-close">&#10006;</a>
           <div class="title ">分段详情<span style="float: right">{{windowInfoData.weather.weather}};{{windowInfoData.weather.temperature}}℃;{{windowInfoData.weather.humidity}}%</span></div>
                <ul>
                 <li><span class="label_view" >分段名称：</span><span>{{windowInfoData.loc.waterItemName}}</span></li>
                 <li><span class="label_view" >道路名称：</span><span>{{windowInfoData.loc.roadName}}</span></li>
                <li><span class="label_view" >管线名称：</span><span class="level_view">{{windowInfoData.loc.pipeInfoName}}</span></li>
                <li><span class="label_view" >管线类型：</span><span class="level_view">{{windowInfoData.loc.pipeTypeName}}</span></li>
                <el-row><el-col :span="12"><li><span class="label_view" >起点名：</span><span class="level_view" >{{windowInfoData.loc.startName}}</span></li></el-col><el-col :span="12"><li><span class="label_view" >起点高程：</span><span class="level_view" >{{windowInfoData.loc.startHeight}}</span></li></el-col></el-row>
                                 <el-row>
                                 <el-col :span="12"><li><span class="label_view" >终点名：</span><span class="level_view" >{{windowInfoData.loc.endName}}</span></li></el-col>
                                 <el-col :span="12"><li><span class="label_view" >终点高程：</span><span class="level_view" >{{windowInfoData.loc.endHeight}}</span></li></el-col></el-row>
                                 <el-row>
                                 <el-col :span="12"><li><span class="label_view" >管(沟块)顶：</span><span class="level_view" >{{windowInfoData.loc.startLand}}</span></li></el-col>
                                   <el-col :span="12"> <li><span class="label_view" >管(沟块)内底：</span><span class="level_view" >{{windowInfoData.loc.endLand}}</span></li></el-col>
                                   </el-row>
                                 <el-row><el-col :span="8"><li><span class="label_view" >管材：</span><span class="level_view" >{{windowInfoData.loc.pipeUseTypeName}}</span></li></el-col><el-col :span="8"><li><span class="label_view" >流量：</span><span class="level_view" >{{windowInfoData.loc.flow}}</span></li></el-col><el-col :span="8"><li><span class="label_view" >管线长度：</span><span class="level_view" >{{windowInfoData.loc.length}}m</span></li></el-col></el-row>
                </ul>
                <el-divider content-position="left"></el-divider>
          <div class="info-btn">
          <el-button type="success" class="btn-item" @click="toControl(item,windowInfoData.projectId)" v-for="item in windowInfoData.monitorPointList" size="small">{{item.monitorTypeName}}</el-button>
          </div>
        <div class="demo-image__lazy" style="height:160px" v-if="windowInfoData.picList">
         <el-carousel trigger="click"  height="150px">
         <templ
          <el-carousel-item v-for="(item,index) in windowInfoData.picList" :key="index">
           <el-image style="height:150px;width:100%"  @click.stop="previewImg(index,windowInfoData.picList)" :src="constUrl+item.url" fit="cover"></el-image>
          </el-carousel-item>
        </el-carousel>
        </div>
        <picture-viewer ref="imageViewer"></picture-viewer>
        </div>
        </el-card>`
          let MyComponent = Vue.extend({
            template: content,
            components: {PictureViewer},
            data() {
              return {
                constUrl: '',
                msg: '边坡详情',

              }
            },
            props: {
              windowInfoData: {
                type: Object
              }
            },
            methods: {

              // 查看大图
              previewImg(index, urls) {

                const urlList = JSON.parse(JSON.stringify(urls));
                urlList.map((x) => {
                  x.url = this.constUrl + x.url;
                  return x;
                });
                // 显示照片查看器
                this.$refs.imageViewer.showViewer(urlList, index);
              },
              toControl(val, projectId) {
                _this.$router.push({
                  path: `/project/${projectId}/work-point/${val.workPointId}/monitor/${val.monitorType}?activeId=${val.id}`
                })
              },
              btnClose() {
                _this.infoWindow.close(_this.map)
              },
            },
            created() {
              this.constUrl = _this.constUrl
            },
            mounted() {
              window.addEventListener("click", this.btnClose);
            }
          })
          AMap.event.addListener(line, 'click', e => {
            this.line.map((x, index) => {
              if (x._amap_id == e.target._amap_id) {
                // this.line[index].setOptions({strokeColor:"white"})
              }
            })
            line.setOptions({strokeColor: "white"})
            AMap.plugin('AMap.Weather', async function () {
            })
            //创建天气查询实例
            var weather = new AMap.Weather();
            //执行实时天气信息查询
            let extData = e.target.getExtData()
            extData.loc = loc
            let region = extData?.regionName?.split('-') || []
            region = region.length > 0 ? region : ['贵州']
            region = region[1] ? region[1] : region[0]
            weather.getLive(region, function (err, data) {

              extData.weather = data || {}
              extData.region = region
              // 窗体信息
              let component = new MyComponent({ // 传参
                propsData: {
                  windowInfoData: extData
                }
              }).$mount()
              let position = [];
              position.push(e.lnglat.lng);
              position.push(e.lnglat.lat);
              _this.infoWindow = new AMap.InfoWindow({
                content: component.$el, // 使用默认信息窗体框样式，显示信息内容
                isCustom: true,
                autoMove: true,
                closeWhenClickMap: true,
                retainWhenClose: true,
                offset: new AMap.Pixel(0, -15),
              })
              _this.infoWindow.open(
                _this.map,
                position// 窗口信息的位置
              )
            })

          })
        }
        // 缩放地图到合适的视野级别
        this.map.setFitView();
      },

      //查询地图缺陷数据
      async queryCheckMapList(pipeType, deptTreeId, baseUnitId, typeCode) {
        this.showLoading = true
        const res = await getcheckMapData({pipeType, deptTreeId, baseUnitId})
        this.projectMapDataList = res.data || []
        this.checkMapDataList = this.projectMapDataList
        this.getMarks1(typeCode)

      },
      getMarks1(typeCode) {
        let that = this
        let mapDataList = this.checkMapDataList
        if (typeCode !== undefined) {
          mapDataList = mapDataList.filter(x => x.warningLevel === typeCode)
        } else {
          mapDataList
        }
        // 信息窗口
        let _this = this
        this.markerClusterer1?.removeMarkers(this.markerList)
        this.showLoading = false
        let content =
          `<el-card class="box-card">
           <a @click="btnClose" class="btn-close amap-ui-infowindow-close amap-ui-smp-ifwn-def-tr-close">&#10006;</a>
           <div class="title ">{{windowInfoData.waterItemName}}缺陷详情<span style="float: right">{{windowInfoData.weather.weather}};{{windowInfoData.weather.temperature}}℃;{{windowInfoData.weather.humidity}}%</span></div>
                <ul>
                 <li><span class="label_view" >道路名称：</span><span>{{windowInfoData.roadName}}</span></li>
                <li><span class="label_view" >管线名称：</span><span class="level_view">{{windowInfoData.pipeInfoName}}</span></li>
                <li><span class="label_view" >管线类型：</span><span class="level_view">{{windowInfoData.pipeTypeName}}</span></li>
                <li><span class="label_view" >管理单位：</span><span>{{windowInfoData.deptTreeName}}</span></li>
                <li><span class="label_view" >分段名称：</span><span>{{windowInfoData.waterItemName}}</span></li>
                <el-row><el-col :span="12"><li><span class="label_view" >缺陷类型：</span><span class="level_view" >{{windowInfoData.defectTypeName}}</span></li></el-col><el-col :span="12"><li><span class="label_view" >具体缺陷类型：</span><span class="level_view" >{{windowInfoData.defectChildTypeName}}</span></li></el-col></el-row>
                                 <el-row><el-col :span="8"><li><span class="label_view" >缺陷等级：</span><span class="level_view" >{{windowInfoData.levelName}}</span></li></el-col><el-col :span="8"><li><span class="label_view" >X坐标：</span><span class="level_view" >{{windowInfoData.xLocation||'暂无数据'}}</span></li></el-col><el-col :span="8"><li><span class="label_view" >Y坐标：</span><span class="level_view" >{{windowInfoData.yLocation ||'暂无数据'}}</span></li></el-col></el-row>
                </ul>
                <el-divider content-position="left"></el-divider>
          <div class="info-btn">
          <el-button type="success" class="btn-item" @click="toControl(item,windowInfoData.projectId)" v-for="item in windowInfoData.monitorPointList" size="small">{{item.monitorTypeName}}</el-button>
          </div>
        <div class="demo-image__lazy" style="height:160px" v-if="windowInfoData.picList">
         <el-carousel trigger="click"  height="150px">
         <templ
          <el-carousel-item v-for="(item,index) in windowInfoData.picList" :key="index">
           <el-image style="height:150px;width:100%"  @click.stop="previewImg(index,windowInfoData.picList)" :src="constUrl+item.url" fit="cover"></el-image>
          </el-carousel-item>
        </el-carousel>
        </div>
        <picture-viewer ref="imageViewer"></picture-viewer>
        </div>
        </el-card>`
        let MyComponent = Vue.extend({
          template: content,
          components: {PictureViewer},
          data() {
            return {
              constUrl: '',
              msg: '边坡详情',

            }
          },
          props: {
            windowInfoData: {
              type: Object
            }
          },
          methods: {

            // 查看大图
            previewImg(index, urls) {

              const urlList = JSON.parse(JSON.stringify(urls));
              urlList.map((x) => {
                x.url = this.constUrl + x.url;
                return x;
              });
              // 显示照片查看器
              this.$refs.imageViewer.showViewer(urlList, index);
            },
            toControl(val, projectId) {
              _this.$router.push({
                path: `/project/${projectId}/work-point/${val.workPointId}/monitor/${val.monitorType}?activeId=${val.id}`
              })
            },
            btnClose() {
              _this.infoWindow.close(_this.map)
            },
          },
          created() {
            this.constUrl = _this.constUrl
          },
          mounted() {
            window.addEventListener("click", this.btnClose);
          }
        })
        this.markerList=   mapDataList.filter(x => x.latitude && x.longitude)
          .map(x => {
            const {longitude, latitude, roadName} = x
            const marker = new AMap.Marker({
              // draggable: true,  //拖拽
              position: [longitude, latitude],
              // offset: new AMap.Pixel(-9, -7),
              content: HTML_CHECK(x.level),  //自定义点标记覆盖物内容    //2状态表示是在线还是离线状态
              extData: x,
              iconLabel: 'test',
              map: that.map,
            })
            // const marker = new AMap.Marker({
            //   position: [longitude, latitude],
            //   offset: new AMap.Pixel(-9, -7),
            //   icon: new AMap.Icon({
            //     image: icon2,
            //     size: new AMap.Size(16, 16),  //图标大小
            //     imageSize: new AMap.Size(16, 16),
            //     imageOffset: new AMap.Pixel(0, 0),
            //   }),
            //   extData: x,
            //   iconLabel: 'test'
            // })
            // 监听单个点点击事件
            AMap.event.addListener(marker, 'click', e => {
              AMap.plugin('AMap.Weather', async function () {
              })
              //创建天气查询实例
              var weather = new AMap.Weather();
              //执行实时天气信息查询
              let extData = e.target.getExtData()
              let region = extData?.regionName?.split('-') || []
              region = region.length > 0 ? region : ['贵州']
              region = region[1] ? region[1] : region[0]
              weather.getLive(region, function (err, data) {
                extData.weather = data || {}
                extData.region = region
                // 窗体信息
                let component = new MyComponent({ // 传参
                  propsData: {
                    windowInfoData: extData
                  }
                }).$mount()
                _this.infoWindow = new AMap.InfoWindow({
                  content: component.$el, // 使用默认信息窗体框样式，显示信息内容
                  isCustom: true,
                  autoMove: true,
                  closeWhenClickMap: true,
                  retainWhenClose: true,
                  offset: new AMap.Pixel(0, -15),
                })
                _this.infoWindow.open(
                  _this.map,
                  marker.getPosition(e.lnt, e.lat)// 窗口信息的位置
                )
              })

            })
            marker.on('mouseout', e => {

              const item = e.target.getExtData()
              // e.target.setContent(HTML_CONT[this.tabValue](item, CURRENT_ICON_MAP[this.tabValue]))
            })
            return marker
          })
        this.map.setFitView(this.markerList)// 自适应显示点标记
        if (typeCode) {

          // this.map.setZoom(12) // 设置地图层级
        }
        this.addCluster1()
      },
      //缺陷mark样式
      addCluster1() {
        var sts = [{
          url: 'https://a.amap.com/jsapi_demos/static/images/red.png',
          size: new AMap.Size(48, 48),
          offset: new AMap.Pixel(-24, -24)
        },]
        AMap.plugin(['AMap.MarkerClusterer'], () => {
          this.markerClusterer1 = new AMap.MarkerClusterer(this.map, this.markerList, {
            styles: sts,
            gridSize: 160,
          })
        })
      },
      // 查询地图数据
      async queryMapList(pipeType, deptTreeId, baseUnitId, typeCode) {
        this.showLoading = true
        const res = await getMapData({pipeType, deptTreeId, baseUnitId})
        this.projectMapDataList = res.data || []
        this.mapDataList = this.projectMapDataList
        this.getMarks(typeCode)

      },

      getMarks(typeCode) {
        let that = this
        let mapDataList = this.mapDataList

        // 信息窗口
        let _this = this
        this.markerClusterer?.removeMarkers(this.markerList)
        this.showLoading = false
        let content =
          `<el-card class="box-card">
           <a @click="btnClose" class="btn-close amap-ui-infowindow-close amap-ui-smp-ifwn-def-tr-close">&#10006;</a>
           <div class="title ">点位详情{{windowInfoData.waterItemName}}详情<span style="float: right">{{windowInfoData.weather.weather}};{{windowInfoData.weather.temperature}}℃;{{windowInfoData.weather.humidity}}%</span></div>
                <ul>
                <el-row>
                <el-col :span="12">
                 <li><span class="label_view" >管线点号：</span><span>{{windowInfoData.name}}</span></li>
                  <li><span class="label_view" >X平面坐标：</span><span>{{windowInfoData.xLocation}}</span></li>
                <li><span class="label_view" >井盖材质：</span><span>{{windowInfoData.coverUseTypeName}}</span></li>
                <li><span class="label_view" >管线类型：</span><span class="level_view">{{windowInfoData.pipeTypeName}}</span></li>
                  <li><span class="label_view" >特征：</span><span class="level_view">{{windowInfoData.teZhengName}}</span></li>
                </el-col>
                <el-col :span="12">
                <li><span class="label_view" >道路名称：</span><span>{{windowInfoData.roadName}}</span></li>
                 <li><span class="label_view" >Y平面坐标：</span><span>{{windowInfoData.yLocation}}</span></li>
                 <li><span class="label_view" >管线名称：</span><span class="level_view">{{windowInfoData.pipeInfoName}}</span></li>
                 <li><span class="label_view" >混流位置：</span><span>{{windowInfoData.mixLocation}}</span></li>
                   <li><span class="label_view" >附属物：</span><span class="level_view">{{windowInfoData.fuShuWuName}}</span></li>
</el-col>
</el-row>
             </ul>
                <el-divider content-position="left"></el-divider>
          <div class="info-btn">
          <el-button type="success" class="btn-item" @click="toControl(item,windowInfoData.projectId)" v-for="item in windowInfoData.monitorPointList" size="small">{{item.monitorTypeName}}</el-button>
          </div>
        <div class="demo-image__lazy" style="height:160px" v-if="windowInfoData.picList">
         <el-carousel trigger="click"  height="150px">
         <templ
          <el-carousel-item v-for="(item,index) in windowInfoData.picList" :key="index">
           <el-image style="height:150px;width:100%"  @click.stop="previewImg(index,windowInfoData.picList)" :src="constUrl+item.url" fit="cover"></el-image>
          </el-carousel-item>
        </el-carousel>
        </div>
        <picture-viewer ref="imageViewer"></picture-viewer>
        </div>
        </el-card>`
        let MyComponent = Vue.extend({
          template: content,
          components: {PictureViewer},
          data() {
            return {
              constUrl: '',
              msg: '边坡详情',

            }
          },
          props: {
            windowInfoData: {
              type: Object
            }
          },
          methods: {

            // 查看大图
            previewImg(index, urls) {

              const urlList = JSON.parse(JSON.stringify(urls));
              urlList.map((x) => {
                x.url = this.constUrl + x.url;
                return x;
              });
              // 显示照片查看器
              this.$refs.imageViewer.showViewer(urlList, index);
            },
            toControl(val, projectId) {
              _this.$router.push({
                path: `/project/${projectId}/work-point/${val.workPointId}/monitor/${val.monitorType}?activeId=${val.id}`
              })
            },
            btnClose() {
              _this.infoWindow.close(_this.map)
            },
          },
          created() {
            this.constUrl = _this.constUrl
          },
          mounted() {
            window.addEventListener("click", this.btnClose);
          }
        })
        if(!this.flag){
          return
        }
        mapDataList.filter(x => x.latitude && x.longitude)
          .map(x => {

            const {longitude, latitude, roadName} = x
            const marker = new AMap.Marker({
              // draggable: true,  //拖拽
              position: [longitude, latitude],
              // offset: new AMap.Pixel(-9, -7),
              content: HTML_CONT(x.icon),  //自定义点标记覆盖物内容    //2状态表示是在线还是离线状态
              extData: x,
              iconLabel: 'test',
              map: that.map,
            })
            // 监听单个点点击事件
            AMap.event.addListener(marker, 'click', e => {
              AMap.plugin('AMap.Weather', async function () {
              })
              //创建天气查询实例
              var weather = new AMap.Weather();
              //执行实时天气信息查询
              let extData = e.target.getExtData()
              let region = extData?.regionName?.split('-') || []
              region = region.length > 0 ? region : ['贵州']
              region = region[1] ? region[1] : region[0]
              weather.getLive(region, function (err, data) {
                extData.weather = data || {}
                extData.region = region
                // 窗体信息
                let component = new MyComponent({ // 传参
                  propsData: {
                    windowInfoData: extData
                  }
                }).$mount()
                _this.infoWindow = new AMap.InfoWindow({
                  content: component.$el, // 使用默认信息窗体框样式，显示信息内容
                  isCustom: true,
                  autoMove: true,
                  closeWhenClickMap: true,
                  retainWhenClose: true,
                  offset: new AMap.Pixel(0, -15),
                })
                _this.infoWindow.open(
                  _this.map,
                  marker.getPosition(e.lnt, e.lat)// 窗口信息的位置
                )
              })

            })
            marker.on('mouseout', e => {
              const item = e.target.getExtData()
              // e.target.setContent(HTML_CONT[this.tabValue](item, CURRENT_ICON_MAP[this.tabValue]))
            })
            that.type2List.push(marker)
            return that.marker
          })
      },
      // marksList样式
      addCluster() {
        // 自定义图标
        var sts = [{
          url: 'https://a.amap.com/jsapi_demos/static/images/blue.png',
          size: new AMap.Size(32, 32),
          offset: new AMap.Pixel(-16, -16)
        }, {
          url: 'https://a.amap.com/jsapi_demos/static/images/green.png',
          size: new AMap.Size(32, 32),
          offset: new AMap.Pixel(-16, -16)
        }, {
          url: 'https://a.amap.com/jsapi_demos/static/images/orange.png',
          size: new AMap.Size(36, 36),
          offset: new AMap.Pixel(-18, -18)
        }, {
          url: 'https://a.amap.com/jsapi_demos/static/images/red.png',
          size: new AMap.Size(48, 48),
          offset: new AMap.Pixel(-24, -24)
        }, {
          url: 'https://a.amap.com/jsapi_demos/static/images/darkRed.png',
          size: new AMap.Size(48, 48),
          offset: new AMap.Pixel(-24, -24)
        }]
        AMap.plugin(['AMap.MarkerClusterer'], () => {
          this.markerClusterer = new AMap.MarkerClusterer(this.map, this.markerList, {
            styles: sts,
            gridSize: 160,
          })
        })
      },
      // 查看大图
      previewImg(index, urls) {
        this.$refs.imageViewer.showViewer(urls.map(x => _this.constUrl + x.url), index)
      },
    },
    mounted() {
      this.initMap()
    }
  }
</script>

<style lang="less">

  .data-layer {
    position: absolute;
    bottom: -80px;
    left: 50%;
    transform: translateX(-50%);
    border-radius: 0.25rem;
    border: 1px solid #266BFF;
    margin-bottom: -1px;

    &::after {
      position: absolute;
      bottom: -10px;
      left: 50%;
      transform: translateX(-50%);
      content: '';
      display: block;
      border-top: 10px solid #266bff;
      width: 0;
      height: 0;
      border-left: 10px solid transparent;
      border-right: 10px solid transparent;
    }

    .data-layer-title {
      line-height: 2;
      padding: 0 0.625rem;
      background: linear-gradient(to right, rgba(25, 97, 241, 1), rgba(25, 97, 241, 0));
      border-radius: 0.25rem 0.25rem 0 0;
      color: #ffffff;
      font-size: 20px;
      display: flex;
      justify-content: space-between;
      align-items: center;

      .title {
        font-family: YouSheBiaoTiHei;
        white-space: nowrap;
        flex-shrink: 0;
      }

      .title_weather {
        margin-left: 8px;
        font-size: 14px !important;
        white-space: nowrap;
        flex-shrink: 0;
      }
    }
  }


  .data-layer .content {
    padding: 1.25rem 0.625rem;
    background: rgba(23, 36, 63, 0.8);
    border-radius: 0 0 0.25rem 0.25rem;
  }

  .data-layer .content p {
    color: #D5E3E8;
    font-size: 0.75rem;
    display: flex;
    align-items: flex-start;
    margin-bottom: 10px;
  }

  .layout-name {
    flex-shrink: 0;
    font-size: 20px;
    margin-right: 10px;
  }

  .layer-image {
    width: 80px;
    height: 80px;
    object-fit: 'fit'
  }

  .data-layer .content p .layer-num {
    white-space: nowrap;
    font-size: 1.25rem;
    color: #3BD5FD;
    font-weight: 600;
    padding-right: 1.25rem /* 20/16 */;
  }


</style>
<style lang="less" scoped>

  .map {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    background-color: #0e1014;
  }

  /deep/ .box-card {

    width: 460px;
    border-radius: 0.25rem;
    border: 1px solid #266BFF;

    .btn-close {
      float: right;
      cursor: pointer;
    }

    .label_view {
      font-size: 15px;
      font-width: 600;
      margin-left: 10px;
      color: #1a253a;
    }

    .level_view {
      display: inline-block;
      padding: 0px 3px;
      border-radius: 3px;
    }

    .title {
      font-size: 20px;
      font-family: YouSheBiaoTiHei;
      white-space: nowrap;
      clear: both;
      background-color: #1a253a;
      margin-bottom: 15px;
      padding: 9px;
      color: white;
      border-radius: 5px;
    }

    .el-card__body {
      padding: 0 0.625rem;
      background: linear-gradient(to right, rgba(58, 80, 106, 0.5), #357c82);
      border-radius: 0.25rem 0.25rem 0 0;
      color: #ffffff;
      font-size: 20px;
      padding-bottom: 20px;
    }

    .el-button--success {
      color: #FFF;
      background-color: #1990FE;
      border-color: #1990FE;
    }

    .info-btn {
      margin-top: 5px;
      margin-bottom: 5px;

      .btn-item {
        margin-bottom: 7px;
        margin-right: 7px;
        background-color: #1990FE;
      }

      /deep/ .el-button + .el-button {
        margin-left: 0px;
      }
    }

    ul li {
      font-size: 13px;
      line-height: 20px;

      span:first-child {
        font-weight: bold;
      }
    }
  }
</style>
<style lang="less">
  .board_map-market {
    text-align: center;

    .market_title {
      color: #ffffff;
      white-space: nowrap;
      text-align: center;
      /*margin-left: -25px;*/
    }

    .market_info {
      color: #2a6ef2;
      white-space: nowrap;
      font-weight: 600;
      text-align: center;
      margin-top: 6px;
      /*margin-left: -50px;*/
    }

    & > .img1 {
      width: 16px;
      height: 16px;
      transform:translateY(23px) translateX(1px) ;
    }

    & > .img2 {
      width: 16px;
      height: 16px;
      transform:translateY(23px) translateX(1px) ;
    }
  }

</style>
